// 0 引入 用来发送请求的方法
import { request } from '../../request/index.js'
import regeneratorRuntime from '../../lib/runtime/runtime'
Page({
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧的菜单
    currentIndex: 0,
    // 右侧滚动条距离顶部距离
    scrollTop: 0,
  },
  // 接口的返回数据
  Cates: [],

  onLoad: function (options) {
    /**
     * 0 web本地存储和小程序区别
     *  1 写代码方式不一样了
     *   web: localStorage.setItem("key", "value") localStorage.getItem("key")
     *   小程序: wx.setStorageSync("key", "value") wx.getStorageSync("key");
     *  2 存在时候类型 web: 不管什么类型最后先调用toString(),变成字符串在存入
     *    小程序: 不存在类型转换的操作 存什么类型 获取的时候就是什么类型
     * 1 先判断本地存储有没有旧数据
     * {{  time: Date.now(), data:[...]  }}
     * 2 没有旧数据 直接发送新的请求
     * 3 有旧的数据 同时旧的数据没有过期就使用 本地存储中的旧数据即可
     */

    // 1 获取本地存储中的数据 (小程序存在本地存储技术)
    const Cates = wx.getStorageSync('cates')
    // 2 判断
    if (!Cates) {
      // 不能存在发送请求, 获取数据
      this.getCates()
    } else {
      // 有旧的数据 没有过期才使用  定义一个过期时间 10s 完成改为5分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCates()
      } else {
        // 可以使用旧数据
        this.Cates = Cates.data
        // 构造左侧大菜单数据
        let leftMenuList = this.Cates.map((v) => v.cat_name)
        // 构造右侧商品数据
        let rightContent = this.Cates[0].children
        this.setData({
          leftMenuList,
          rightContent,
        })
      }
    }
  },
  // 获取分类数据
  async getCates() {
    // request({
    //     url: "/categories"
    //   })
    //   .then(res => {
    //     // console.log(res);
    //     this.Cates = res.data.message;

    //     // 把接口的数据存入本地存储中
    //     wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });

    //     // 构造左侧大菜单数据
    //     let leftMenuList = this.Cates.map(v => v.cat_name);
    //     // 构造右侧商品数据
    //     let rightContent = this.Cates[0].children;
    //     this.setData({
    //       leftMenuList,
    //       rightContent
    //     })

    //   })

    // 1 使用es7的async await
    const res = await request({
      url: '/categories',
    })
    // this.Cates = res.data.message;
    this.Cates = res

    // 把接口的数据存入本地存储中
    wx.setStorageSync('cates', {
      time: Date.now(),
      data: this.Cates,
    })

    // 构造左侧大菜单数据
    let leftMenuList = this.Cates.map((v) => v.cat_name)
    // 构造右侧商品数据
    let rightContent = this.Cates[0].children
    this.setData({
      leftMenuList,
      rightContent,
    })
  },
  // 左侧菜单的点击事件
  handleItemTap(e) {
    // console.log(e);
    /**
     * 1 获取被点击的标题身上的索引
     * 2 给data中的currentIndex赋值就可以了
     * 3 给不同的索引渲染不同的商品
     */
    const { index } = e.currentTarget.dataset

    // 构造右侧商品数据
    let rightContent = this.Cates[index].children

    this.setData({
      currentIndex: index,
      rightContent,
      // 重新设置右侧内容的 scroll-view标签距离顶部的距离
      scrollTop: 0,
    })
  },
})
